var a_pannel_is_already_displayed = false;
var current_pannel = "";

$("document").ready(function() {
    
    $("a.pannellink").click(function(event) {
        // pour que le lien n'effectue pas son action par défaut lors
        // d'un click (à savoir : recharger la page)
        event.preventDefault();
        
        // si un panneau est déjà affiché...
        if(a_pannel_is_already_displayed) {
            
            // on reclick sur le même menu = on le cache
            if(current_pannel == $(this).attr('href')) {
                cf = null;
                // effet fade out
                $("#wrappercontentpannel").animate({'opacity': '0'}, 150, function() {
                    $("#contentpannel").animate({'opacity': '0'}, 300);
                    setTimeout(function(){
                        // effet de flou gaussien pour FF et Chrome/Safari
                        $("section#content").css("filter", "none");
                        $("section#content").css("-webkit-filter", "none");
                        $("#contentpannel").css('display', 'none');
                    }, 200);
                });
                // on indique que plus aucun panneau n'est affiché
                current_pannel = "";
                a_pannel_is_already_displayed = false;
            } else { // sinon, si on clique sur un autre menu = on actualise le contenu du panneau
                cf = null;
                $("#wrappercontentpannel").animate({'opacity': '0'}, 150);
                // on recherche le contenu à afficher via AJAX...
                $.ajax({
                    type: "GET",
                    url: $(this).attr('href'), // on se base sur le contenu du "href" du lien
                    cache: false,
                    success: function(data) {
                        // la requête terminée, on actualise le contenu de la section
                        // "wrappercontentpannel" (cf base.html.twig)
                        $("#wrappercontentpannel").html(data);
                        $("#wrappercontentpannel").animate({'opacity': '1'}, 150);
                    }
                });
                
                // on stock le panneau actuellement affiché
                current_pannel = $(this).attr('href');
                a_pannel_is_already_displayed = true;
            }
        } else { // si aucun panneau n'est actuellement affiché...
            $("#contentpannel").css('display', 'block');
            // on effectue l'animation qui noircit l'arrière-plan
            $("#contentpannel").animate({'opacity': '1'}, 300);
            
            // on attend un peu pour flouté le fond pour rendre l'animation plus jolie
            setTimeout(function() {
                $("section#content").css("filter", "url(../../bundles/bridjbridj/svg/gaussianblur.svg#gaussian_blur2)");
                $("section#content").css("-webkit-filter", "blur(4px)");
            }, 200);
            
            // on exécute la requête via AJAX chargée de récupérer le contenu à afficher
            $.ajax({
                type: "GET",
                url: $(this).attr('href'),
                cache: false,
                success: function(data) {
                    $("#wrappercontentpannel").html(data);
                    // on attend un peu avant d'afficher le contenu pour rendre
                    // l'animation plus jolie
                    setTimeout(function() {
                        $("#wrappercontentpannel").animate({'opacity': '1'}, 150);
                    }, 200);
                }
            });
            // on stock le panneau actuellement affiché
            current_pannel = $(this).attr('href');
            a_pannel_is_already_displayed = true;
        }
    });
});